<template>
  <div class="house-type-container">
    <!-- 户型分类标签 -->
    <div class="type-tabs">
      <div
          v-for="tab in tabs"
          :key="tab.type"
          class="type-tab"
          :class="{ active: activeTab === tab.type }"
          @click="switchTab(tab.type)"
      >
        {{ tab.label }}({{ tab.count }})
      </div>
    </div>

    <!-- 户型展示区域 -->
    <div class="house-list">
      <div
          v-for="house in filteredHouses"
          :key="house.id"
          class="house-card"
          @click="viewHouseDetail(house.id)"
      >
        <div class="house-image-container">
          <img :src="house.image" :alt="house.name" class="house-image" />
        </div>
        <div class="house-info">
          <h3 class="house-name">{{ house.name }}</h3>
          <p class="house-layout">{{ house.layout }}</p>
          <p class="house-price">{{ house.price }}</p>
          <p class="house-area">{{ house.area }}</p>
          <div class="house-tags">
            <span v-if="house.isOnSale" class="tag sale">在售</span>
            <span v-if="house.isRecommended" class="tag recommend">主推</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 查看户型详情
const viewHouseDetail = (houseId: number) => {
  router.push({
    name: 'HouseDetail', // 确保与您的路由配置一致
    params: { id: houseId }
  })
}
// 定义户型类型
interface HouseType {
  type: string
  label: string
  count: number
}

// 定义户型信息
interface House {
  id: number
  name: string
  layout: string
  price: string
  area: string
  image: string
  type: string
  isOnSale: boolean
  isRecommended: boolean
}

// 户型分类数据
const tabs = ref<HouseType[]>([
  { type: 'all', label: '全部户型', count: 4 },
  { type: 'two', label: '2室户型', count: 0 },
  { type: 'three', label: '3室户型', count: 1 },
  { type: 'four', label: '4室户型', count: 3 },
  { type: 'five', label: '5室户型', count: 0 }
])

// 当前激活的户型分类
const activeTab = ref('all')

// 户型数据
const houses = ref<House[]>([
  {
    id: 1,
    name: 'F1户型',
    layout: '4室2厅2卫',
    price: '售价待定',
    area: '134m²',
    image: 'https://pic4.ajkimg.com/display/xinfang/960645bd0251159bd45703fc165d60df/240x180n.jpg',
    type: 'four',
    isOnSale: true,
    isRecommended: true
  },
  {
    id: 2,
    name: 'A1户型',
    layout: '4室2厅3卫',
    price: '250万起',
    area: '165-168m²',
    image: 'https://pic4.ajkimg.com/display/xinfang/d17cfa829a26d640240ff95b98d1c026/240x180n.jpg',
    type: 'four',
    isOnSale: true,
    isRecommended: true
  },
  {
    id: 3,
    name: 'B1户型',
    layout: '4室2厅2卫',
    price: '200万起',
    area: '147m²',
    image: 'https://pic4.ajkimg.com/display/xinfang/63098422060d872488d250b207221edb/240x180n.jpg',
    type: 'four',
    isOnSale: true,
    isRecommended: false
  },
  {
    id: 4,
    name: 'J1户型',
    layout: '3室2厅1卫',
    price: '110万起',
    area: '91-93m²',
    image: 'https://pic4.ajkimg.com/display/xinfang/841861a7f746ed13290e94925399d098/240x180n.jpg',
    type: 'three',
    isOnSale: true,
    isRecommended: false
  }
])

// 切换户型分类
const switchTab = (type: string) => {
  activeTab.value = type
}

// 根据当前分类筛选户型
const filteredHouses = computed(() => {
  if (activeTab.value === 'all') {
    return houses.value
  }
  return houses.value.filter(house => {
    if (activeTab.value === 'two') return house.type === 'two'
    if (activeTab.value === 'three') return house.type === 'three'
    if (activeTab.value === 'four') return house.type === 'four'
    if (activeTab.value === 'five') return house.type === 'five'
    return true
  })
})
</script>

<style scoped>
.house-type-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: white;
}

/* 户型分类标签样式 */
.type-tabs {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.type-tab {
  padding: 8px 16px;
  border-radius: 16px;
  background-color: #f5f5f5;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.type-tab:hover {
  background-color: #e0e0e0;
}

.type-tab.active {
  background-color: #4CAF50;
  color: white;
}

/* 户型列表样式 */
.house-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.house-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.house-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.house-image-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.house-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.house-card:hover .house-image {
  transform: scale(1.05);
}

.house-info {
  padding: 16px;
}

.house-name {
  font-size: 18px;
  margin-bottom: 8px;
  color: #333;
}

.house-layout {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.house-price {
  font-size: 16px;
  color: #ff5722;
  font-weight: bold;
  margin-bottom: 8px;
}

.house-area {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.house-tags {
  display: flex;
  gap: 8px;
}

.tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.tag.sale {
  background-color: #e3f2fd;
  color: #1976d2;
}

.tag.recommend {
  background-color: #fff8e1;
  color: #ff8f00;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .type-tabs {
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .type-tab {
    padding: 6px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .house-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
  }

  .house-image-container {
    height: 160px;
  }
}
</style>